<template>
  <div class="h-80 w-full flex flex-col">
    <div ref="chinaMapRef" class="flex-1 h-0"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import china from "../echarts-3d-china.json";
import { useEchartsResizeAndDestory } from "../hooks/EchartsResizeAndDestoryHooks";

const chinaMapRef = ref(null);
const chinaInstance = shallowRef();

const option = {
  // 工具提示配置
  tooltip: {
    show: true, // 是否显示工具提示
    triggerOn: "mousemove", // 触发类型，可选值：'mousemove'、'click'
    padding: [4, 8], // 提示框内边距
    borderWidth: 1, // 提示框边框宽度
    borderColor: "#409eff", // 提示框边框颜色
    backgroundColor: "rgba(255,255,255,0.7)", // 提示框背景颜色
    textStyle: {
      color: "#000000", // 提示框文字颜色
      fontSize: 13, // 提示框文字大小
    },
    formatter: function (e) {
      return e.name; // 格式化提示框显示内容
    },
  },
  // 地理坐标系配置
  geo: [
    // 第一层
    {
      map: "china", // 地图类型
      z: 3, // z层级
      zoom: 1.2, // 缩放比例
      aspectScale: 0.85, // 宽高比
      roam: false, // 是否开启缩放和平移
      top: "10%", // 距离顶部的距离
      layoutSize: "100%", // 保持地图宽高比
      regions: [
        {
          // 隐藏南海诸岛，因为顶层已经添加过了
          name: "南海诸岛",
          itemStyle: {
            borderWidth: 0.5, // 边框宽度
            shadowBlur: 0, // 阴影模糊程度
            borderColor: "#61aacb", // 边框颜色
            areaColor: "#104584", // 区域颜色
          },
        },
      ],
      itemStyle: {
        borderColor: "#c8feff", // 边框颜色
        borderWidth: 0.5, // 边框宽度
        shadowBlur: 3, // 阴影模糊程度
        shadowColor: "#66edff", // 阴影颜色
        areaColor: "#0862db", // 区域颜色
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10, // 阴影模糊程度
          borderWidth: 1, // 边框宽度
          areaColor: "#2da9ff", // 区域颜色
        },
        label: {
          show: false, // 是否显示标签
          color: "#ffffff", // 标签颜色
        },
      },
      select: {
        itemStyle: {
          shadowBlur: 10, // 阴影模糊程度
          borderWidth: 1, // 边框宽度
          areaColor: "#2da9ff", // 区域颜色
        },
        label: {
          color: "#ffffff", // 标签颜色
        },
      },
    },
    // 第二层
    {
      map: "china", // 地图类型
      z: 2, // z层级
      zoom: 1.2, // 缩放比例
      aspectScale: 0.85, // 宽高比
      roam: false, // 是否开启缩放和平移
      silent: true, // 是否静态
      top: "10%", // 距离顶部的距离
      layoutSize: "100%", // 保持地图宽高比
      regions: [
        {
          // 隐藏南海诸岛，因为顶层已经添加过了
          name: "南海诸岛",
          itemStyle: {
            opacity: 0, // 透明度，为0时不绘制该图形
          },
          label: {
            show: false, // 是否显示标签
          },
        },
      ],
      itemStyle: {
        borderColor: "#d8feff", // 边框颜色
        borderWidth: 3, // 边框宽度
        shadowBlur: 10, // 阴影模糊程度
        shadowColor: "#22a1ff", // 阴影颜色
        areaColor: "#0862db", // 区域颜色
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 8, // 阴影垂直偏移
      },
    },
    // 第三层
    {
      map: "china", // 地图类型
      z: 1, // z层级
      zoom: 1.2, // 缩放比例
      aspectScale: 0.85, // 宽高比
      top: "11.5%", // 距离顶部的距离
      silent: true, // 是否静态
      layoutSize: "100%", // 保持地图宽高比
      itemStyle: {
        borderColor: "#c8feff", // 边框颜色
        borderWidth: 1, // 边框宽度
        shadowBlur: 0, // 阴影模糊程度
        shadowColor: "#99c4ff", // 阴影颜色
        areaColor: "#4ebaff", // 区域颜色
      },
      regions: [
        {
          // 隐藏南海诸岛，因为顶层已经添加过了
          name: "南海诸岛",
          itemStyle: {
            opacity: 0, // 透明度，为0时不绘制该图形
          },
          label: {
            show: false, // 是否显示标签
          },
        },
      ],
    },
    // 第四层
    {
      map: "china", // 地图类型
      z: 0, // z层级
      zoom: 1.2, // 缩放比例
      aspectScale: 0.85, // 宽高比
      top: "12%", // 距离顶部的距离
      silent: true, // 是否静态
      layoutSize: "100%", // 保持地图宽高比
      itemStyle: {
        borderColor: "#66edff", // 边框颜色
        borderWidth: 2, // 边框宽度
        shadowBlur: 20, // 阴影模糊程度
        shadowColor: "#4d99ff", // 阴影颜色
        areaColor: "#1752ad", // 区域颜色
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 8, // 阴影垂直偏移
      },
      regions: [
        {
          // 隐藏南海诸岛，因为顶层已经添加过了
          name: "南海诸岛",
          itemStyle: {
            opacity: 0, // 透明度，为0时不绘制该图形
          },
          label: {
            show: false, // 是否显示标签
          },
        },
      ],
    },
  ],
  // 系列配置
  series: [
    // 地图
    {
      type: "map", // 图表类型
      geoIndex: 0, // 地理坐标系索引
      data: [], // 数据
    },
  ],
};

useEchartsResizeAndDestory(chinaInstance, chinaMapRef);
onMounted(() => {
  init();
});

const init = () => {
  echarts.registerMap("china", china);
  const echartsContainer = chinaMapRef.value;
  if (!echartsContainer) return;

  chinaInstance.value = echarts.init(echartsContainer);
  chinaInstance.value.setOption(option);
};
</script>

<style lang="scss" scoped></style>
